<template>
    <div class="content">
        <!-- <el-input placeholder="输入测点关键字进行过滤" v-model="filterText">
        </el-input> -->
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" highlight-current node-key="pid"
            :default-expanded-keys=defaultExpandedKey :filter-node-method="filterNode" ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                    <i :class="data.icon"></i>{{ node.label }}
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 默认展开的节点
            defaultExpandedKey: ['d1'],
            filterText: ""
        }
    },
    computed: {
        ...mapState("backstage", ["sensorTreeData"]),
    },
    props: {
        treeData: {
            type: Array,
            default: []
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {

            if (!value) return true;
            if (data.label.includes(value) && data.type == 's') {
                return true;
            }

            return false; // 展示所有未匹配到的节点
        },
        handleNodeClick(e) {

            this.$emit("sendData", e)
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
</style>
